<template>
  <!-- 企业详情 -->
  <view class="passBusinessDetails">
    <view class="bgColor"></view>

    <view class="wrapper">
      <view class="blueTitle">
        <view class="wrapper-bar" style="height: auto">
          <view class="wrapper-bartitle">
            <image :src="baseImgUrl + 'qi-icon.png'" mode=""></image>
            {{ detail.companyInfo.companyName }}
          </view>
        </view>
      </view>

      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">标准地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.standardAddress || '' }}
            </view>
          </view>
        </view>
        <!-- <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">详细地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.addressDetail }}
            </view>
          </view>
        </view> -->
        <view class="text-picture">
          <view class="lt">
            <view class="wrapper-facility">
              <view class="facility-item">
                <view class="textAlign label">所属分类：</view>
                <view class="value valueName">
                  {{ detail.informationInfo.informationName }}
                </view>
              </view>

              <view class="facility-item">
                <view class="textAlign label">所属辖区：</view>
                <view class="value valueName">
                  {{ detail.sysPoliceAgencyInfo.jurisdictionName || "无" }}
                </view>
              </view>
              <view class="facility-item">
                <view class="textAlign label">责任民警：</view>
                <view class="value valueName">
                  {{ detail.sysPoliceAgencyInfo.userName || "暂未分配" }}
                </view>
              </view>
            </view>
          </view>
          <view class="rt">
            <image :src="
                companyStatus == 2
                  ? baseImgUrl + 'self-state3.png'
                  : baseImgUrl + 'self-state4.png'
              " mode=""></image>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 基础功能 </view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body list-wrapper">
          <view class="item funItem" v-for="(item, index) in funClassifyList" :key="index" @click="funSkipHandle(item)">
            <image class="img" :src="item.icon"></image>
            <view class="text">{{ item.text }}</view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 特色功能 </view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="list-wrapper">
            <view class="item" v-for="(item, index) in tercelList" :key="index"
              :data-url="`${item.miniRouteUrl}?companyMessageId=${detail.companyInfo.id}&companyName=${detail.companyInfo.companyName}`"
              @click="handleClickRouter" style="margin-bottom: 40rpx">
              <image class="img-icon" :src="imgPrefix + item.iconUrl" v-if="index > 1"></image>
              <image class="img-icon" :src="imgPrefix + item.iconUrl" v-else></image>
              <view class="text">{{ item.industryFeaturesName }}</view>
            </view>
          </view>
          <view v-if="!tercelList.length" class="feature-class">
            <image :src="baseImgUrl + 'home-empty.png'" mode=""></image>
            <view>您的企业暂无特色功能</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    featuredIndustry
  } from "@/api/home.js";
  import {
    companyChangeDetail,
    messageDetail,
    userFindResponsible,
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    isLoading,
    pvwImage,
    Toast
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        detail: {},
        options: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        personImage: "", // 法人照片
        companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败 4.退出纳管
        //   基础功能
        funClassifyList: [{
            id: 1,
            text: "注册信息",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_1.png",
            url: "/selfInfo/myBusiness/businessDetails",
          },
          {
            id: 2,
            text: "管理员",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_2.png",
            url: "/selfInfo/modificationSite/siteInfoPerson",
          },
          {
            id: 3,
            text: "场所信息",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_3.png",
            url: "/businessPremises/bpremisesInfo/bpremisesInfo",
          },
          {
            id: 7,
            text: "从业人员",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_6.png",
            url: "/featureFun/staffInfo/staffInfo",
          },
          {
            id: 4,
            text: "安防信息",
            value: 0,
            icon: this.$baseImgUrl + "infowhi_icon1.png",
            url: "/securityInfor/securityMessage/securityMessage",
          },
          {
            text: "检查记录",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_5.png",
            url: "/selfInfo/goover/goover",
          },
          {
            id: 5,
            text: "责任书",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_4.png",
            url: "/selfInfo/liabilityStatement/liabilityStatement",
          },
          {
            id: 8,
            text: "安全演练",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_8.png",
            url: "/fireFighting/fireSkits/fireSkits",
          },
          {
            id: 9,
            text: "安全培训",
            value: 0,
            icon: this.$baseImgUrl + "passIcon_9.png",
            url: "/fireFighting/fireDrill/fireDrill",
          }
        ],
        // 特色功能
        tercelList: [],
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList(options.id);
      this.features();
    },
    methods: {
      handleClickRouter,
      pvwImage,
      funSkipHandle(v) {
        console.log(v)
        if (v.id == 1) {
          uni.navigateTo({
            url: `${v.url}?id=${this.options.id}`,
          });
          return;
        }

        if (v.id == 2) {
          userFindResponsible({
            companyId: this.options.id
          }).then((res) => {
            if (res.code == 200 && res.result.responsible) {
              uni.navigateTo({
                url: `${v.url}?id=${this.options.id}`,
              });
            } else {
              Toast("您当前不是管理员");
            }
          });
          return;
        }

        if (v.id == 6) {
          uni.switchTab({
            url: v.url,
          });
          return;
        }

        if (v.id == 3 || v.id == 4 || v.id == 7) {
          uni.navigateTo({
            url: `${v.url}?companyMessageId=${this.options.id}`,
          });
          return;
        }

        uni.navigateTo({
          url: `${v.url}?companyId=${this.detail.companyInfo.id}`,
        });
      },
      features() {
        featuredIndustry({
          companyMessageId: this.options.id
        }).then((res) => {
          console.log(res, "特色");
          if (res.code == 200) {
            this.tercelList = res.result || [];
          }
        });
      },
      getList(id) {
        if (this.options.homeon) {
          isLoading()
          companyChangeDetail({
              changeId: id
            }).then((res) => {
              if (res.code == 200) {
                this.companyStatus = res.result.auditInfo.companyStatus;
                this.detail = res.result;
                this.personImage = res.result.legalInfo.personImage ?
                  this.imgPrefix + res.result.legalInfo.personImage :
                  "";
              }
            })
            .finally(() => {
              isLoading(false)
            })
          return false;
        }
        isLoading()
        messageDetail({
            companyId: id
          }).then((res) => {
            if (res.code == 200) {
              this.companyStatus = res.result.auditInfo.companyStatus;
              this.detail = res.result;
              this.personImage = res.result.legalInfo.personImage ?
                this.imgPrefix + res.result.legalInfo.personImage :
                "";
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .passBusinessDetails {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
    }

    .wrapper {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;

      .blueTitle {
        padding: 20rpx 40rpx;
        border-radius: 10rpx 10rpx 0 0;
        background: #ecf9ff;
      }

      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-body {
          padding-top: 20px;
        }

        .list-wrapper {
          display: flex;
          font-size: 24rpx;
          flex-wrap: wrap;
          color: #272727;
          bottom: 14.543vh;
          left: 25rpx;

          .item {
            position: relative;
            text-align: center;
            width: 25%;

            .badgeText {
              top: -15rpx;
              right: 18rpx;
            }

            .img {
              margin-bottom: 1vh;
              width: 88rpx;
              height: 88rpx;
            }

            .img-icon {
              margin-bottom: 1vh;
              width: 88rpx;
              height: 88rpx;
            }

            .text {
              color: #343434;
              font-size: 26rpx;
              line-height: 1;
            }
          }

          .funItem:nth-of-type(-n + 8) {
            padding-bottom: 30rpx;
          }
        }

        .text-picture {
          display: flex;
          justify-content: space-between;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 144rpx;
            height: 138rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .feature-class {
          text-align: center;
          font-size: 24rpx;
          font-weight: 500;
          color: #858894;

          image {
            display: inline-block;
            margin-bottom: 10rpx;
            width: 85rpx;
            height: 50rpx;
          }
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }

          image {
            margin-bottom: -3rpx;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
          }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
      }
    }

    .ccie-details {
      color: #2488f5;
    }
  }
</style>